<template>
  <div class="header-inner">
    <!-- logo -->
    <div class="logo">
      <img v-if="tenant.iconUrl" :src="tenant.iconUrl" alt="logo" />
      <span>{{ tenant.name }}</span>
    </div>
    <!--（一级菜单）系统选择 -->
    <div class="projects">
      <pt-button @click="fn_showprjSysPage" type="text">
        <span class="prj-name">
          <span class="name">{{ system ? system.name : "请选择系统" }}</span>
          <i class="arrow iconfont icon-xiangyou"></i>
        </span>
      </pt-button>
    </div>

    <!-- 右侧功能 -->
    <div class="hright">
      <!-- 搜索 -->
      <!-- <el-tooltip effect="dark" content="搜索" placement="top">
        <i class="user iconfont icon-chazhao" @click="fn_search"></i>
      </el-tooltip>-->
      <!-- 锁屏 -->
      <el-tooltip effect="dark" content="锁屏" placement="top">
        <i class="user iconfont icon-suoping" @click="fn_clock"></i>
      </el-tooltip>
      <!-- 全屏 -->
      <el-tooltip effect="dark" content="全屏" placement="top">
        <i class="user iconfont icon-fangda" @click="fn_fullpage"></i>
      </el-tooltip>
      <!-- 设置 -->
      <el-tooltip effect="dark" content="主题" placement="top">
        <i class="user iconfont icon-shezhi" @click="fn_set"></i>
      </el-tooltip>
      <!-- 帮助 -->
      <el-tooltip effect="dark" content="帮助" placement="top">
        <i class="user iconfont icon-yiwen" @click="fn_help"></i>
      </el-tooltip>
      <!-- 个人信息 -->
      <pt-button
        class="user"
        type="text"
        icon="vip"
        :iconSize="14"
        @click="fn_showUserInfo"
      >{{ userInfo.name || '' }}</pt-button>

      <!-- 个人信息-弹框 -->
      <pt-dropdown :visible.sync="userSetShow" style="border-radius: 5px;" top="54px" right="10px">
        <div class="user-dropdown">
          <ul>
            <li @click="fn_jumpToHome">
              <pt-button type="text">首页</pt-button>
            </li>
            <li @click="fn_userInfo">
              <pt-button type="text">个人信息</pt-button>
            </li>
            <li @click="fn_exit">
              <pt-button type="text">退出系统</pt-button>
            </li>
          </ul>
        </div>
      </pt-dropdown>
    </div>

    <!-- 系统选择弹框 -->
    <pt-dialog
      title="系统选择"
      width="800px"
      height="80%"
      :noFooter="true"
      :visible.sync="isShowprjSysPage"
    >
      <ul class="system_dialog">
        <li
          style="padding: 10px 0;"
          class="system_dialog_item"
          v-for="item in system_list"
          :key="item.name"
          :class="[system.name === item.name ? 'is_active' : '']"
          @click="fn_selectSystem(item)"
        >{{ item.name }}</li>
      </ul>
    </pt-dialog>

    <!-- 设置弹框 -->
    <pt-dialog
      title="系统设置"
      width="800px"
      height="80%"
      :noFooter="true"
      :visible.sync="isShowSysSetPage"
    >
      <header-theme></header-theme>
    </pt-dialog>

    <!-- 锁屏 -->
    <el-dialog :visible.sync="box" title="设置锁屏密码" width="30%" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item :rules="[{ required: true, message: '锁屏密码不能为空'}]" label="锁屏密码" prop="passwd">
          <el-input v-model="form.passwd" placeholder="请输入锁屏密码" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSetLock">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { postDefaultSystem, getNewsPage } from "@/api/desktop/index.js";
import { dowmloadHelpDoc } from "@/api/desktop/file.js";
import { mapGetters } from "vuex";
import headerTheme from "./header-theme.vue";
export default {
  components: {
    "header-theme": headerTheme
  },
  props: {
    // 系统列表
    systemList: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  data () {
    return {
      // 系统列表：展开的菜单
      prjsShow: "",
      // 系统列表：选中的系统
      activeSystem: "",
      // 系统列表：下拉框是否显示
      prjDropDown: false,
      // 是否显示系统菜单弹框
      isShowprjSysPage: false,
      // 右侧功能：用户下拉菜单
      userSetShow: false,
      // 系统设置
      isShowSysSetPage: false,
      box: false,
      form: {
        passwd: ""
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo", "system", "system_list", "lockPasswd", "tenant"])
  },
  methods: {
    // 显示系统列表弹框
    fn_showprjSysPage () {
      this.isShowprjSysPage = true;
    },
    // 更换系统
    async fn_selectSystem (item) {
      if (item.id === this.system.id) {
        return;
      }

      let response = await postDefaultSystem({
        id: item.id,
        name: item.name,
        value: item.id
      });

      if (response.data.code !== 0) {
        return;
      }

      getNewsPage(item.id).then(res => {
        if (res.data.code === 0) {
          this.$store.commit("SET_LAYOUT", res.data.data || "");
          this.$store.commit("SET_SYSTEM", item);
          this.$store.commit("SET_MENU", item.children);
        }
      });
    },
    // 更新系统布局信息
    fn_updateLayout () {
      console.log("fn_updateLayout");
    },
    // 搜索
    fn_search () {
      console.log("fn_search");
    },
    // 锁屏
    handleSetLock () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$store.commit("SET_LOCK_PASSWD", this.form.passwd);
          this.fn_clock();
        }
      });
    },
    fn_clock () {
      if (this.validatenull(this.lockPasswd)) {
        this.box = true;
        return;
      }
      this.$store.commit("SET_LOCK");
      setTimeout(() => {
        this.$router.push({ path: "/lock" });
      }, 100);
    },
    // 全屏
    fn_fullpage () {
      // 判断当前是否全屏
      if (window.outerHeight <= window.innerHeight) {
        this.fn_exitfullscreen();
      } else {
        this.fn_enterfullscreen();
      }
    },
    // 设置
    fn_set () {
      this.isShowSysSetPage = true;
    },
    // 帮助 /admin/sys-file/developmentDoc
    fn_help () {
      dowmloadHelpDoc();
    },
    // 个人信息
    fn_showUserInfo () {
      this.userSetShow = !this.userSetShow;
    },
    // 跳转到主页
    fn_jumpToHome () {
      this.$router.push("/");
    },
    // 个人信息
    fn_userInfo () {
      this.$router.push("/info/index");
    },
    // 退出系统
    fn_exit () {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/login" });
        });
      });
    },
    // 进入全屏
    fn_enterfullscreen () {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    // 退出全屏
    fn_exitfullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.header-inner /deep/ {
  height: 54px;
  background-repeat: no-repeat;
  background-size: 100% 60px;
  position: relative;
  box-shadow: 0px 4px 4px 0px #ddd;
  z-index: 5;
  .bgImgDeskTop();
  .bgColor();
  .logo {
    height: 54px;
    display: flex;
    align-items: center;
    width: 240px;
    float: left;
    padding: 0 0 0 16px;
    img {
      width: 40px;
      height: 40px;
      margin-right: 6px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      font-size: 16px;
      color: @fColor4;
      font-weight: 700;
    }
  }

  //系统选择
  .projects {
    float: left;
    position: relative;
    height: 54px;
    .prj-name {
      font-size: 14px;
      color: @fColor4;
      .name {
        float: left;
        width: 84px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 2px;
      }
      .arrow {
        float: right;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .pt-button {
      line-height: 54px;
    }
  }
  // 系统弹框
  .system_dialog {
    .is_active {
      .color();
    }
    .system_dialog_item {
      cursor: pointer;
    }
  }

  //右侧功能
  .hright {
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 18px;
    .user {
      padding-right: 14px;
      color: @fColor4;
      font-size: 15px;
      cursor: pointer;
    }
    .user-dropdown {
      li {
        padding: 10px 30px;
        &:hover {
          background-color: #f2f2f2;
          .pt-button {
            .color();
          }
        }
      }
      button {
        color: @fColor2;
        font-size: 14px;
        cursor: default;
      }
    }
  }

  //头部菜单
  .nav {
    padding-left: 394px;
    padding-right: 326px;
    .nav_i {
      position: relative;
    }
    ul.menu {
      padding-right: 56px;
      position: relative;
      height: 54px;
      overflow: hidden;
      li {
        float: left;
        height: 54px;
        padding: 0 14px;
        padding-top: 20px;
        cursor: pointer;
        transition: background-color 0.2s;
        button {
          color: @fColor4;
          font-size: 14px;
        }
        &.more {
          position: absolute;
          right: 0;
          top: 0;
          cursor: default;
          &:hover {
            button {
              color: @fColor4;
            }
            background-color: transparent;
          }
        }
        &:hover {
          button {
            .color();
          }
          background-color: @bgColor3;
        }
        &.act {
          button {
            font-size: 16px;
            font-weight: 700;
            .color();
          }
          background-color: @bgColor3;
        }
      }
    }
    .more-dd {
      // width: 120px;
      // overflow-y: auto;
      li {
        padding: 10px 18px;
        button {
          font-size: 14px;
          color: @fColor2;
          cursor: default;
        }
        &.act,
        &:hover {
          background-color: #fff4ee;
          button {
            color: @primary;
          }
        }
      }
    }
  }
}
</style>
